<template>
  <t-dialog
    v-model:visible="formVisible"
    header="新增或编辑系统目录"
    width="680"
    :footer="false"
    @close="onClickCloseBtn"
  >
    <template #body>
      <!-- 表单内容 -->
      <t-form ref="form" :data="formData" :rules="rules" @submit="onSubmit">
        <t-input v-model="formData.routeId" hidden></t-input>
        <t-input v-model="formData.parentId" hidden></t-input>
        <t-input v-model="formData.metaId" hidden></t-input>
        <t-form-item label="标题" name="meta.title">
          <t-input v-model="formData.meta.title" />
        </t-form-item>
        <t-form-item label="代码" name="code">
          <t-input v-model="formData.code" />
        </t-form-item>
        <t-form-item label="类型" name="type">
          <t-select v-model="formData.type" clearable>
            <t-option v-for="(item, index) in SELECT_OPTIONS" :key="index" :value="item.value" :label="item.label">
              {{ item.label }}
            </t-option>
          </t-select>
        </t-form-item>
        <t-form-item label="路径" name="path">
          <t-input v-model="formData.path" />
        </t-form-item>
        <t-form-item label="名称" name="name">
          <t-input v-model="formData.name" />
        </t-form-item>
        <t-form-item label="组件" name="component">
          <t-input v-model="formData.component" />
        </t-form-item>
        <t-form-item label="重定向" name="redirect">
          <t-input v-model="formData.redirect" />
        </t-form-item>
        <t-form-item style="float: right">
          <t-button variant="outline" @click="onClickCloseBtn">取消</t-button>
          <t-button theme="primary" type="submit">确定</t-button>
        </t-form-item>
      </t-form>
    </template>
  </t-dialog>
</template>

<script setup lang="tsx">
import { FormRules, MessagePlugin, SubmitContext } from 'tdesign-vue-next';
import { PropType, ref, watch } from 'vue';

import { saveOrUpdate } from '@/api/common';

export interface FormData {
  routeId: number;
  type: number;
  code: string;
  path: string;
  name: string;
  component: string;
  redirect: string;
  parentId: number;
  meta: {
    metaId: number;
    title: string;
  };
}

const SELECT_OPTIONS = [
  { label: '目录', value: 0 },
  { label: '页面', value: 1 },
  { label: '按钮', value: 2 },
];

const INITIAL_DATA: FormData = {
  routeId: null,
  type: 0,
  path: '',
  code: '',
  name: '',
  component: '',
  redirect: '',
  parentId: 0,
  meta: {
    metaId: null,
    title: '',
  },
};

const props = defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
  data: Object as PropType<FormData>,
});

const formVisible = ref(false);
const formData = ref({ ...INITIAL_DATA });

const onSubmit = async ({ validateResult, firstError }: SubmitContext) => {
  if (!firstError) {
    await saveOrUpdate('/sysRoute/saveOrUpdate', formData.value);
    MessagePlugin.success('提交成功');
    formVisible.value = false;
    // await emit.refreshTable();
    await emit('refreshTable');
  } else {
    console.log('Errors: ', validateResult);
    MessagePlugin.warning(firstError);
  }
};

const onClickCloseBtn = () => {
  formVisible.value = false;
  formData.value = { ...INITIAL_DATA };
  console.log(`onClickCloseBtn`);
};

const emit = defineEmits(['update:visible', 'refreshTable']);
// const emit = defineEmits<{
//   'update:visible': void;
//   refreshTable: void;
// }>();

watch(
  () => formVisible.value,
  (val) => {
    emit('update:visible', val);
  },
);

watch(
  () => props.visible,
  (val) => {
    formVisible.value = val;
  },
);

watch(
  () => props.data,
  (val) => {
    formData.value = val;
    console.log('formData', val);
  },
);

const rules: FormRules = {
  path: [{ required: true, message: '请输入路径', type: 'error' }],
  code: [{ required: true, message: '请输入代码', type: 'error' }],
  type: [{ required: true, message: '请选择类型', type: 'error' }],
  name: [{ required: true, message: '请输入名称', type: 'error' }],
  component: [{ required: true, message: '请输入组件', type: 'error' }],
  'meta.title': [{ required: true, message: '请输入标题', type: 'error' }],
};
</script>
